import React from 'react';
import './index.scss';
import { Button, Input, DatePicker } from 'antd';
import {
  ProForm,
  ProFormDependency,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormGroup,
} from '@ant-design/pro-components';
import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};

// eslint-disable-next-line arrow-body-style
const disabledDate = (current) => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const disabledDateTime = () => ({
  disabledHours: () => range(0, 24).splice(4, 20),
  disabledMinutes: () => range(30, 60),
  disabledSeconds: () => [55, 56],
});
export default function Newapp() {
  const { Search } = Input;
  return (
    <>
      <div className="topBut">
        <Button>保存</Button>
        <Button>保存且新增</Button>
        <Button>草稿箱</Button>
        <span className="spans"></span>
        <Button>导入</Button>
      </div>
      <div className="rksqbox">
        <div
          style={{
            paddingTop: '1rem',
            fontSize: '1.5rem',
            textAlign: 'center',
          }}
        >
          入库申请
        </div>
        {/* 基本信息 */}
        <div className="tables">
          <table border={1}>
            <tr className="trs">
              <td colspan={8} style={{ textAlign: 'left', padding: '.3rem' }}>
                基本信息
              </td>
            </tr>
            <tr>
              <td>
                <span style={{ color: 'red' }}>*</span> 单据主题:
              </td>
              <td>
                <Input />
              </td>
              <td>单据编号:</td>
              <td>
                {' '}
                <Input placeholder="RK2023010008" />
              </td>
              <td>来源单据:</td>
              <td>
                <Input />
              </td>
              <td>
                <span style={{ color: 'red' }}>*</span> 库管人员:
              </td>
              <td>
                <Search />
              </td>
            </tr>
            <tr>
              <td>申请人员:</td>
              <td>
                {' '}
                <Input />{' '}
              </td>
              <td>
                {' '}
                <span style={{ color: 'red' }}>*</span> 申请时间:
              </td>
              <td>
                {' '}
                <DatePicker
                  format="YYYY-MM-DD HH:mm:ss"
                  disabledDate={disabledDate}
                  disabledTime={disabledDateTime}
                  showTime={{
                    defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
                  }}
                />
              </td>
              <td>入库类别:</td>
              <td>
                {' '}
                <Input placeholder="申请直接入库" />{' '}
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>
                <span style={{ color: 'red' }}>*</span> 供应商名称:
              </td>
              <td>
                <Search />{' '}
              </td>
              <td></td>
              <td>
                {' '}
                <Input />{' '}
              </td>
              <td></td>
              <td>
                {' '}
                <Input />{' '}
              </td>
              <td></td>
              <td>
                {' '}
                <Input />{' '}
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan={7}>
                <Input />
              </td>
            </tr>
          </table>
        </div>
        {/* 入库明细 */}
        <div className="rkmxbox">
          <ProForm>
            {/* <ProFormList
                            name='labels'
                            label="入库明细"
                            style={{ fontSize: "1.5rem" }}
                            initialValue={[
                                {
                                    name: '1111',
                                },
                            ]}
                            alwaysShowItemLabel
                        >
                            <ProForm.Group key="group">
                                <ProFormText width="xs" name="function" label="产品名称" />
                                <ProFormText width="xs" name="gfunction" label="产品编号" />
                                <ProFormText width="xs" name="gfunction" label="规格型号" />
                                <ProFormText width="xs" name="gfunction" label="单位" />
                                <ProFormText width="xs" name="gfunction" label="单价" />
                                <ProFormText width="xs" name="gfunction" label="申请入库数量" />
                                <ProFormText width="xs" name="gfunction" label="总金额" />
                                <ProFormText width="xs" name="gfunction" label="批号" />
                                <ProFormText width="xs" name="gfunction" label="生产日期" />
                                <ProFormText width="xs" name="gfunction" label="有效日期" />
                                <ProFormText width="xs" name="gfunction" label="到货日期" />
                                <ProFormText width="xs" name="gfunction" label="包装方式" />
                                <ProFormText width="xs" name="gfunction" label="备注" />
                            </ProForm.Group>
                            <ProForm.Group key="group">
                                <ProFormText width="xs" name="function" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                                <ProFormText width="xs" name="gfunction" />
                            </ProForm.Group>
                        </ProFormList> */}
            <ProFormList
              name="labels"
              label="入库明细"
              style={{ fontSize: '1.5rem' }}
              initialValue={[
                {
                  name: '1111',
                },
              ]}
              // copyIconProps={{ Icon: SmileOutlined, tooltipText: '复制此行到末尾' }}
              copyIconProps={false}
              deleteIconProps={{
                Icon: CloseCircleOutlined,
                tooltipText: '不需要这行了',
              }}
              alwaysShowItemLabel
            >
              <ProForm.Group>
                <ProFormText width="xs" name="function" label="产品名称" />
                <ProFormText width="xs" name="gfunction" label="产品编号" />
                <ProFormText width="xs" name="gfunction" label="规格型号" />
                <ProFormText width="xs" name="gfunction" label="单位" />
                <ProFormText width="xs" name="gfunction" label="单价" />
                <ProFormText width="xs" name="gfunction" label="申请入库数量" />
                <ProFormText width="xs" name="gfunction" label="总金额" />
                <ProFormText width="xs" name="gfunction" label="批号" />
                <ProFormText width="xs" name="gfunction" label="生产日期" />
                <ProFormText width="xs" name="gfunction" label="有效日期" />
                <ProFormText width="xs" name="gfunction" label="到货日期" />
                <ProFormText width="xs" name="gfunction" label="包装方式" />
                <ProFormText width="xs" name="gfunction" label="备注" />
              </ProForm.Group>
            </ProFormList>
          </ProForm>
        </div>
        <div className="fujian">
          <table border={1}>
            <tr>
              <td colspan={14}>
                附件 &nbsp; <Button>批量上传</Button>{' '}
              </td>
            </tr>
            <tr>
              <td colSpan={6}> 文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td colSpan={2}>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{ backgroundColor: 'white' }}>
              <td colspan={14} style={{ height: '4rem' }}></td>
            </tr>
          </table>
        </div>
      </div>
    </>
  );
}
